<template>
    <div class="input-warp">
        <div class="input box vertical-center horizontal-center">
            <div class="input-name">
                <slot></slot>
            </div>
            <input class="inputVal box-1" type="tel">
            <com-button btnClass="input-btn"
                        :disabled="disabledData"
                        @btn-click="click"
                        buttonStyle="line-height:2rem"
            >{{btnTextData}}</com-button>
        </div>
    </div>
</template>

<script>
    import ComButton from '@/components/com-button.vue'
    export default {
        components: { ComButton },
        data () {
            return {
                btnTextData: this.btnText,
                disabledData: this.disabled
            }
        },
        watch: {
            btnText ( value) {
                this.btnTextData = value
            },
            disabled ( value ) {
                this.disabledData = value
            }
        },
        props: {
            btnText: {
                type: String,
                default: '获取验证码'
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            click () {
                this.$emit('btn-click')
            }
        }
    }
</script>

<style scoped>
    .input-warp{
        background: #ffffff;
    }
    .input{
        width: 90%;
        height: 3.125rem;
        margin: 0 auto;
    }
    .input-name{
        width: 20%;
    }
    .inputVal{
        display: block;
        height: 1rem;
        outline: none;
        border:none;
    }
    .input-btn{
        width: 30%;
        height: 2rem;
        line-height: 2rem;
        color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
    }
</style>